import React, { Component } from "react";
import FlipClock from "./components/FlipClock";
import "./index.css";

interface TimerState {
    hou: string;
    second: string;
    minutes: string;
    strikes: number;
}

class TimerCom extends Component<{}, TimerState> {
    private intervalId: NodeJS.Timeout | null = null;

    constructor(props: {}) {
        super(props);
        this.state = {
            hou: "00",
            second: "00",
            minutes: "00",
            strikes: 0,
        };
    }

    private updateTimer = (): void => {
        const nextstrikes = this.state.strikes + 1000;
        const o_nextstrikes = nextstrikes + 1000;

        const hou = parseInt(String(nextstrikes / 3600000)) % 24;
        const minutes = parseInt(String(nextstrikes / 60000)) % 60;
        const second = parseInt(String(nextstrikes / 1000)) % 60;

        console.log(`当前时间: ${hou}:${minutes}:${second}`);

        this.setState({
            hou: String(hou).padStart(2, "0"),
            minutes: String(minutes).padStart(2, "0"),
            second: String(second).padStart(2, "0"),
            strikes: nextstrikes,
        });
    };

    componentDidMount() {
        this.intervalId = setInterval(this.updateTimer, 1000); // 调整为每秒更新一次
    }

    componentWillUnmount() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }

    render() {
        const { hou, minutes, second } = this.state;
        return (
            <div className="timer-container">
                <FlipClock />
                <div className="timer-display">
                    <h1>{`${hou}:${minutes}:${second}`}</h1>
                </div>
            </div>
        );
    }
}

export default TimerCom;
